import React, { Component } from 'react';
// import { Tabs, WhiteSpace, NavBar, Icon } from 'antd-mobile';
import style from './index.module.scss';

class Com extends Component {

    state = {
        num: 1
    }
    to (num) {
        this.setState({
            num: num
        })
    }
     
  render() {
    const tabs = [
        { title: '境内' },
        { title: '境外/港澳台' },
      ];
    return (
      <div className='box'>
          <div className='content'>
              {/* 头部切换 */}
              {/* <NavBar
                mode="light"
                icon={<Icon type="left" />}
                onLeftClick={() => console.log('onLeftClick')}
               style={{ color: '#3CD578' }}
               rightContent={[
                <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
                <Icon key="1" type="ellipsis" />,
              ]}
            >
               <WhiteSpace />
                    <Tabs tabs={tabs} initialPage={2} animated={false} useOnPan={false}>
                        <div style={{ tabBarActiveTextColor: '#3CD578', display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff', tabBarInactiveTextColor: '#3CD578' }}>
                            Content of first tab
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff', color: '#3CD578' }}>
                            Content of second tab
                        </div>
                    </Tabs>
                <WhiteSpace /> 
            </NavBar> */}
            <div className={style.top}>
                <span style={{ fontSize: '0.25rem'}}>&lt;</span>
                <ul>
                    <li className={ this.state.num === 1 ? style.you : ''} onClick={ ()=> { this.to(1) }}>境内</li>
                    <li className={ this.state.num === 2 ? style.you : ''} onClick={ ()=> { this.to(2) }}>境外/港澳台</li>
                </ul>
            </div>
            {/* 搜索 */}
            <div className={style.search}>
                 <input type="text" className={style.serch} placeholder='输入城市名、拼音或字母查询'/>
            </div>

            {/* 定位 */}
            <div className={style.ding}>
                <div className={style.dinglie}>
                    {/* 当前城市 */}
                    <div className={style.now}>
                        <div className={style.now1}>
                            <span>&nbsp;</span>
                            <b>你所在的地区</b>
                        </div>
                        <div className={style.now2}>
                            <img src="/images/chuxing/公司团建@2x.png" alt=""/>
                            <span>厦门</span>
                        </div>
                    </div>
                    {/* 当前城市 */}
                    {/* 热门城市 */}
                    <div className={style.hotcity}>
                        <div className={style.now1}>
                            <span>&nbsp;</span>
                            <b>热门城市</b>
                        </div>

                        {/* 热门城市图片 */}
                        <div className={style.retu}>
                            <div className={style.now2}>
                                <img src="/images/chuxing/公司团建@2x.png" alt=""/>
                                <span>厦门</span>
                            </div>
                            <div className={style.now2}>
                                <img src="/images/chuxing/公司团建@2x.png" alt=""/>
                                <span>厦门</span>
                            </div>
                            <div className={style.now2}>
                                <img src="/images/chuxing/公司团建@2x.png" alt=""/>
                                <span>厦门</span>
                            </div>
                            <div className={style.now2}>
                                <img src="/images/chuxing/公司团建@2x.png" alt=""/>
                                <span>厦门</span>
                            </div>
                        </div>
                        {/* 热门城市图片 */}
                    </div>
                    {/* 热门城市 */}
                </div>
                <ul className={style.zimu}>
                    <li>当前热门</li>
                    <li>A</li>
                    
                </ul>
            </div>
          </div>
      </div>
    );
  }
}

export default Com